<template>
  <el-dialog
    v-model="visible"
    :title="isEdit ? '编辑里程碑' : '创建里程碑'"
    width="50%"
    @close="handleClose">
    
    <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
      <el-form-item label="里程碑名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入里程碑名称" />
      </el-form-item>
      
      <el-form-item label="里程碑描述" prop="description">
        <el-input 
          v-model="form.description" 
          type="textarea" 
          :rows="3"
          placeholder="请输入里程碑描述" />
      </el-form-item>
      
      <el-form-item label="截止日期" prop="due_date">
        <el-date-picker 
          v-model="form.due_date" 
          type="date" 
          placeholder="选择截止日期" 
          style="width: 100%" />
      </el-form-item>
      
      <el-form-item label="所属阶段" prop="phase_id">
        <el-select v-model="form.phase_id" placeholder="请选择阶段（可选）" style="width: 100%">
          <el-option label="不关联阶段" :value="null" />
          <el-option 
            v-for="phase in phases" 
            :key="phase.id" 
            :label="phase.name" 
            :value="phase.id" />
        </el-select>
      </el-form-item>
      
      <el-form-item label="完成状态" prop="is_completed">
        <el-switch 
          v-model="form.is_completed" 
          active-text="已完成" 
          inactive-text="未完成" />
      </el-form-item>
      
      <el-form-item v-if="form.is_completed" label="完成日期" prop="completed_date">
        <el-date-picker 
          v-model="form.completed_date" 
          type="date" 
          placeholder="选择完成日期" 
          style="width: 100%" />
      </el-form-item>
    </el-form>
    
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="loading">
          {{ isEdit ? '更新' : '创建' }}
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { ref, reactive, watch } from 'vue'
import { ElMessage } from 'element-plus'

export default {
  name: 'MilestoneDialog',
  props: {
    modelValue: {
      type: Boolean,
      default: false
    },
    projectId: {
      type: Number,
      required: true
    },
    milestone: {
      type: Object,
      default: null
    },
    phases: {
      type: Array,
      default: () => []
    }
  },
  emits: ['update:modelValue', 'success'],
  setup(props, { emit }) {
    const formRef = ref(null)
    const loading = ref(false)
    
    const form = reactive({
      name: '',
      description: '',
      due_date: '',
      phase_id: null,
      is_completed: false,
      completed_date: null
    })
    
    const rules = {
      name: [
        { required: true, message: '请输入里程碑名称', trigger: 'blur' },
        { min: 2, max: 100, message: '长度在 2 到 100 个字符', trigger: 'blur' }
      ],
      due_date: [
        { required: true, message: '请选择截止日期', trigger: 'change' }
      ]
    }
    
    // 计算属性
    const visible = ref(props.modelValue)
    const isEdit = ref(false)
    
    // 监听props变化
    watch(() => props.modelValue, (newVal) => {
      visible.value = newVal
    })
    
    watch(() => props.milestone, (newMilestone) => {
      if (newMilestone) {
        isEdit.value = true
        Object.assign(form, {
          name: newMilestone.name,
          description: newMilestone.description || '',
          due_date: newMilestone.due_date,
          phase_id: newMilestone.phase_id,
          is_completed: newMilestone.completed || false,
          completed_date: newMilestone.completed_date
        })
      } else {
        isEdit.value = false
        resetForm()
      }
    })
    
    // 监听visible变化
    watch(visible, (newVal) => {
      emit('update:modelValue', newVal)
    })
    
    // 重置表单
    const resetForm = () => {
      Object.assign(form, {
        name: '',
        description: '',
        due_date: '',
        phase_id: null,
        is_completed: false,
        completed_date: null
      })
      if (formRef.value) {
        formRef.value.resetFields()
      }
    }
    
    // 关闭对话框
    const handleClose = () => {
      visible.value = false
      resetForm()
    }
    
    // 提交表单
    const handleSubmit = () => {
      formRef.value.validate(async (valid) => {
        if (valid) {
          loading.value = true
          try {
            const formData = {
              ...form,
              project_id: props.projectId
            }
            
            // 这里应该调用API
            console.log('提交里程碑数据:', formData)
            
            ElMessage.success(isEdit.value ? '更新里程碑成功' : '创建里程碑成功')
            emit('success')
            handleClose()
          } catch (error) {
            ElMessage.error(isEdit.value ? '更新里程碑失败' : '创建里程碑失败')
          } finally {
            loading.value = false
          }
        }
      })
    }
    
    return {
      formRef,
      form,
      rules,
      loading,
      visible,
      isEdit,
      handleClose,
      handleSubmit
    }
  }
}
</script>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>
